import React from 'react';
import { Row, Col, Form, Button, DatePicker } from 'antd';
import moment from 'moment';
import { ymd } from 'configs/constants';
import { combineDate } from 'utils/share';
// import { nextTick } from 'utils/nextTick';

const formItemLayout = {
  labelCol: {
    span: 8
  },
  wrapperCol: {
    span: 16
  }
};
const FormItem = Form.Item;

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.onSearch = this.onSearch.bind(this);
  }
  onSearch() {
    const { onSearch, form, record } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const params = combineDate([values.dateTime, values.dateTime]);
        onSearch({ deviceNo: record.equipmentNo, ...params });
      }
    });
  }

  renderBtn() {
    const { form } = this.props;
    return (
      <FormItem
        {...formItemLayout}
      >
        <Button
          type="primary"
          onClick={() => this.onSearch()}
        >搜索</Button>
        <Button
          htmlType="reset"
          style={{ marginLeft: 20 }}
          onClick={() => {
            form.setFieldsValue({ dateTime: moment() });
            this.onSearch();
          }}
        >重置</Button>
      </FormItem>
    );
  }

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form layout="horizontal">
        <Row gutter={16}>
          <Col span={12}>
            <FormItem
              label="时间选择"
              {...formItemLayout}
            >
              {getFieldDecorator('dateTime', {
                initialValue: moment()
              })(<DatePicker
                placeholder="请选择时间"
                format={ymd}
              />)}
            </FormItem>
          </Col>
          <Col span={12}>
            {this.renderBtn()}
          </Col>
        </Row>
      </Form>
    );
  }
}

export default Form.create({})(SearchBar);